---
id: layoutAnimations
title: How to easily animate your screens and components
sidebar_label: Layout Animations
hide_table_of_contents: true
---

import TutorialStep from '@theme/TutorialStep';
import BeforeAndAfter from '@theme/BeforeAndAfter';
import FullCode from './_fullCode.md';
import ParticipantComponent from './_participantComponent.md';
import ParticipantInternals from './_participantInternals.md';
import Step1 from './_step1.md';
import Step2 from './_step2.md';
import Step3 from './_step3.md';
import Step4 from './_step4.md';
import Before from '@site/static/img/tutorial/layoutAnimations/before.gif';
import Entering from '@site/static/img/tutorial/layoutAnimations/entering.gif';
import Layout from '@site/static/img/tutorial/layoutAnimations/layout.gif';
import After from '@site/static/img/tutorial/layoutAnimations/after.gif';

:::tip

Layout Animations are available since v2.3.0

:::

This tutorial will help you make your screens and components more smooth by adding animations.
We will use a new feature from the Reanimated library - Layout Animations which lets us animate:

- components appearance
- components disappearance
- layout changes

using predefined animations. There are plenty of predefined animations you can use, however,
if you need to create more customized animation, you can easily implemented your own.

To give you a better understanding of how to use those animations,
we are gonna prettify an already existing screen - participant list, by adding layout animations to its components.
Here you can see the effect of the changes we will make going through this tutorial.

<BeforeAndAfter before={Before} after={After} />

<TutorialStep title="Screen Introduction">
  <div>
    Here we have an already existing Participant list component (you can find
    the full code to edit yourself&nbsp;
    <a href="https://gist.github.com/jmysliv/87b15453aab173a63a4d22fcc5b1d603">
      here
    </a>). Let's focus on the parts that we will animate, in this case - the Participant
    component.
  </div>
  <FullCode />
</TutorialStep>
<TutorialStep title="Participant component">
  <div>
    The Participant component is responsible for displaying a list item, which
    we will be animating.
  </div>
  <ParticipantComponent />
</TutorialStep>
<TutorialStep title="Participant component internals">
  <div>
    As you can see the Participant component is wrapped in one View component,
    and that's the place where will be adding our animations. We can only
    animate components that are provided by Reanimated (e.g. Animated.View), or
    components we changed using createAnimatedComponent.
  </div>
  <ParticipantInternals />
</TutorialStep>
<TutorialStep title="Step 1">
  <div>
    Let's import Animated from Reanimated and replace View with Animated.View,
    so we can add animations to our component.
  </div>
  <Step1 />
</TutorialStep>
<TutorialStep title="Step 2">
  <div>
    Now let's add an entering animation. There is plenty of available&nbsp;
    <a href="https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/LayoutAnimations/entryAnimations">
      predefined animations
    </a>
    &nbsp;that we can choose from. We will go with the LightSpeedInLeft effect.
  </div>
  <Step2 />
</TutorialStep>
<TutorialStep title="Current result">
  <div>
    Here you can see the effect we have achieved by adding the entering
    animation.
  </div>
  <img
    src={Entering}
    style={{ height: '500px', width: 'auto', borderRadius: '5%' }}
  />
</TutorialStep>
<TutorialStep title="Step 3">
  <div>Now let's add a layout transition.</div>
  <Step3 />
</TutorialStep>
<TutorialStep title="Current result">
  <div>
    Here you can see the effect we have achieved by adding a layout transition.
  </div>
  <img
    src={Layout}
    style={{ height: '500px', width: 'auto', borderRadius: '5%' }}
  />
</TutorialStep>
<TutorialStep title="Step 4">
  <div>
    Now let's add an exiting animation. Again there are many&nbsp;
    <a href="https://docs.swmansion.com/react-native-reanimated/docs/2.x/api/LayoutAnimations/exitAnimations">
      predefined animations
    </a>
    &nbsp; we can choose from. We will go with the LightSpeedOutRight effect.
  </div>
  <Step4 />
</TutorialStep>

#### And that's all! You can see that adding layout animations to our list was super easy and the user experience is way better. You can find the full code of the animated list [here](https://gist.github.com/jmysliv/0056d6cd3021883ea0f2c7f4af0526b2).

<center>
  <img src={After} height="500px" style={{ borderRadius: '5%' }} />
</center>
